<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="postForm.searchName" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="small" @click="query()">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          prop="title"
          header-align="center"
          align="center"
          label="标题"
        />
        <el-table-column
          prop="sendUserName"
          header-align="center"
          align="center"
          label="发件人"
        />
        <el-table-column
          prop="receiverUsersName"
          header-align="center"
          align="center"
          label="收件人"
        >
          <template scope="scope">
            <el-tooltip class="item" effect="dark" v-if="scope.row.receiverUsersName" :content="scope.row.receiverUsersName" placement="top">
              <span>{{ scope.row.receiverUsersName.length > 20 ? scope.row.receiverUsersName.substr(0,20) + "..." : scope.row.receiverUsersName }}</span>
            </el-tooltip>
            <span v-else>{{scope.row.receiverUsersName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="copySendUsersName"
          header-align="center"
          align="center"
          label="抄送人"
        >
          <template scope="scope">
            <el-tooltip class="item" effect="dark" v-if="scope.row.copySendUsersName" :content="scope.row.copySendUsersName" placement="top">
              <span>{{ scope.row.copySendUsersName.length > 20 ? scope.row.copySendUsersName.substr(0,20) + "..." : scope.row.copySendUsersName }}</span>
            </el-tooltip>
            <span v-else>{{scope.row.copySendUsersName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          header-align="center"
          align="center"
          label="内容"
        >
          <template scope="scope">
            <el-tooltip class="item" effect="dark" v-if="scope.row.content" :content="scope.row.content" placement="top">
              <span>{{ scope.row.content.length > 20 ? scope.row.content.substr(0,20) + "..." : scope.row.content }}</span>
            </el-tooltip>
            <span v-else>{{scope.row.content}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fileIds"
          header-align="center"
          align="center"
          label="文件"
        >
          <template scope="scope">
            <img v-for="(path, index) in scope.row.filePathList" :key="path + index" :src="path" style="width:50px;height:50px;margin: 5px;">
          </template>
        </el-table-column>
        <el-table-column
          prop="replyEmailTitle"
          header-align="center"
          align="center"
          label="回复邮件标题"
        />
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="button"
              class="el-button el-button--primary el-button--mini"
              @click="editInfo(scope.$index, scope.row)"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :model="info" label-position="left" label-width="200px">
        <el-form-item label="标题:">
          <el-input v-model="info.title" readonly />
        </el-form-item>
        <el-form-item label="发件人:">
          <el-input v-model="info.sendUserName" readonly />
        </el-form-item>
        <el-form-item label="发送时间:">
          <el-input v-model="info.crtTime" readonly />
        </el-form-item>
        <el-form-item label="收件人:">
          <el-input v-model="info.receiverUsersName" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="抄送人:">
          <el-input v-model="info.copySendUsersName" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="info.content" type="textarea" readonly />
        </el-form-item>
        <el-form-item label="文件:">
          <el-image
            v-for="(path, index) in info.filePathList"
            :key="path + index"
            style="width: 100px; height: 100px;margin: 5px;"
            :src="path"
            fit="cover"
            :preview-src-list="info.filePathList"
          />
        </el-form-item>
        <div v-if="info.isReply === 1">
          <el-divider content-position="left">上一条邮件（回复原邮件）</el-divider>
          <el-form-item label="标题:">
            <el-input v-model="replyEmail.title" readonly />
          </el-form-item>
          <el-row type="flex" justify="space-between" :gutter="20">
            <el-col :span="12">
              <el-form-item label="发件人:">
                <el-input v-model="replyEmail.sendUserName" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发送时间:">
                <el-input v-model="replyEmail.crtTime" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="收件人:">
            <el-input v-model="replyEmail.receiverUsersName" type="textarea" readonly />
          </el-form-item>
          <el-form-item label="抄送人:">
            <el-input v-model="replyEmail.copySendUsersName" type="textarea" readonly />
          </el-form-item>
          <el-form-item label="内容:">
            <el-input v-model="replyEmail.content" type="textarea" readonly />
          </el-form-item>
          <el-form-item label="文件:">
            <el-image
              v-for="(path, index) in replyEmail.filePathList"
              :key="path + index"
              style="width: 100px; height: 100px;margin: 5px;"
              :src="path"
              fit="cover"
              :preview-src-list="replyEmail.filePathList"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getInfo, page } from '@/api/app/email.js'

  export default {
    data() {
      return {
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 10,
        // 页码
        currentPage: 1,
        postForm: { searchName: '' },
        info: {},
        tableData: [],
        centerDialogVisible: false,
        title: '查看',
        replyEmail: {},
        rules: {
        }
      }
    },
    created() {
      this.getData()
    },
    methods: {
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 查询条件
      query() {
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.postForm.searchName).then(response => {
          this.total = response.count
          this.tableData = response.data
        })
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data.info
          if (this.info.isReply === 1) {
            this.replyEmail = response.data.replyEmail
          }
        })
      }
    }
  }
</script>

